<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/multipage/forms.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:35:38 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=../styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  
  <script defer="" crossorigin="" src=../html-dfn.js></script>
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   <hgroup><h1 class=allcaps>HTML</h1><p id=living-standard>Living Standard — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   
   

   
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=tables.html>← 4.9 Tabular data</a> — <a href=index.html>Table of Contents</a> — <a href=input.html>4.10.5 The input element →</a></nav><ol class=toc><li id=toc-semantics><ol><li><a href=forms.html#forms><span class=secno>4.10</span> Forms</a><ol><li><a href=forms.html#introduction-4><span class=secno>4.10.1</span> Introduction</a><ol><li><a href="forms.html#writing-a-form's-user-interface"><span class=secno>4.10.1.1</span> Writing a form's user interface</a><li><a href=forms.html#implementing-the-server-side-processing-for-a-form><span class=secno>4.10.1.2</span> Implementing the server-side processing for a form</a><li><a href=forms.html#configuring-a-form-to-communicate-with-a-server><span class=secno>4.10.1.3</span> Configuring a form to communicate with a server</a><li><a href=forms.html#client-side-form-validation><span class=secno>4.10.1.4</span> Client-side form validation</a><li><a href=forms.html#enabling-client-side-automatic-filling-of-form-controls><span class=secno>4.10.1.5</span> Enabling client-side automatic filling of form controls</a><li><a href=forms.html#improving-the-user-experience-on-mobile-devices><span class=secno>4.10.1.6</span> Improving the user experience on mobile devices</a><li><a href=forms.html#the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality><span class=secno>4.10.1.7</span> The difference between the field type, the autofill field name, and the input modality</a><li><a href=forms.html#input-author-notes><span class=secno>4.10.1.8</span> Date, time, and number formats</a></ol><li><a href=forms.html#categories><span class=secno>4.10.2</span> Categories</a><li><a href=forms.html#the-form-element><span class=secno>4.10.3</span> The <code>form</code> element</a><li><a href=forms.html#the-label-element><span class=secno>4.10.4</span> The <code>label</code> element</a></ol></ol></ol><h3 id=forms><span class=secno>4.10</span> Forms<a href=#forms class=self-link></a></h3><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms title="This page lists all the HTML elements, which are created using tags.">Element#Forms</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>61+</span></span><hr><span class="opera yes"><span>Opera</span><span>52+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>16+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>5+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3.2+</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>61+</span></span><span class="webview_android yes"><span>WebView Android</span><span>61+</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>8.0+</span></span><span class="opera_android yes"><span>Opera Android</span><span>47+</span></span></div></div></div>

  <h4 id=introduction-4><span class=secno>4.10.1</span> Introduction<a href=#introduction-4 class=self-link></a></h4>

  <p><i>This section is non-normative.</i></p>

  <p>A form is a component of a web page that has form controls, such as text, buttons, checkboxes,
  range, or color picker controls. A user can interact with such a form, providing data that can
  then be sent to the server for further processing (e.g. returning the results of a search or
  calculation). No client-side scripting is needed in many cases, though an API is available so that
  scripts can augment the user experience or use forms for purposes other than submitting data to a
  server.</p>

  <p>Writing a form consists of several steps, which can be performed in any order: writing the user
  interface, implementing the server-side processing, and configuring the user interface to
  communicate with the server.</p>


  <h5 id="writing-a-form's-user-interface"><span class=secno>4.10.1.1</span> Writing a form's user interface<a href="#writing-a-form's-user-interface" class=self-link></a></h5>

  <p><i>This section is non-normative.</i></p>

  <p>For the purposes of this brief introduction, we will create a pizza ordering form.</p>

  <p>Any form starts with a <code id="writing-a-form's-user-interface:the-form-element"><a href=#the-form-element>form</a></code> element, inside which are placed the controls. Most
  controls are represented by the <code id="writing-a-form's-user-interface:the-input-element"><a href=input.html#the-input-element>input</a></code> element, which by default provides a text
  control. To label a control, the <code id="writing-a-form's-user-interface:the-label-element"><a href=#the-label-element>label</a></code> element is used; the label text and the
  control itself go inside the <code id="writing-a-form's-user-interface:the-label-element-2"><a href=#the-label-element>label</a></code> element. Each part of a form is considered a
  <a id="writing-a-form's-user-interface:paragraph" href=dom.html#paragraph>paragraph</a>, and is typically separated from other parts using <code id="writing-a-form's-user-interface:the-p-element"><a href=grouping-content.html#the-p-element>p</a></code> elements.
  Putting this together, here is how one might ask for the customer's name:</p>

  <pre><code class='html'><strong><c- p>&lt;</c-><c- f>form</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Customer name: <c- p>&lt;</c-><c- f>input</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></strong></code></pre>

  <p>To let the user select the size of the pizza, we can use a set of radio buttons. Radio buttons
  also use the <code id="writing-a-form's-user-interface:the-input-element-2"><a href=input.html#the-input-element>input</a></code> element, this time with a <code id="writing-a-form's-user-interface:attr-input-type"><a href=input.html#attr-input-type>type</a></code> attribute with the value <code id="writing-a-form's-user-interface:radio-button-state-(type=radio)"><a href="input.html#radio-button-state-(type=radio)">radio</a></code>. To make the radio buttons work as a group, they are
  given a common name using the <code id="writing-a-form's-user-interface:attr-fe-name"><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute. To group a batch
  of controls together, such as, in this case, the radio buttons, one can use the
  <code id="writing-a-form's-user-interface:the-fieldset-element"><a href=form-elements.html#the-fieldset-element>fieldset</a></code> element. The title of such a group of controls is given by the first element
  in the <code id="writing-a-form's-user-interface:the-fieldset-element-2"><a href=form-elements.html#the-fieldset-element>fieldset</a></code>, which has to be a <code id="writing-a-form's-user-interface:the-legend-element"><a href=form-elements.html#the-legend-element>legend</a></code> element.</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Customer name: <c- p>&lt;</c-><c- f>input</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<strong> <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Size <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><c- p>&gt;</c-> Small <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><c- p>&gt;</c-> Medium <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><c- p>&gt;</c-> Large <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c-></strong>
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  <p class=note>Changes from the previous step are highlighted.</p>

  <p>To pick toppings, we can use checkboxes. These use the <code id="writing-a-form's-user-interface:the-input-element-3"><a href=input.html#the-input-element>input</a></code> element with a <code id="writing-a-form's-user-interface:attr-input-type-2"><a href=input.html#attr-input-type>type</a></code> attribute with the value <code id="writing-a-form's-user-interface:checkbox-state-(type=checkbox)"><a href="input.html#checkbox-state-(type=checkbox)">checkbox</a></code>:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Customer name: <c- p>&lt;</c-><c- f>input</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Size <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><c- p>&gt;</c-> Small <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><c- p>&gt;</c-> Medium <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><c- p>&gt;</c-> Large <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
<strong> <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Toppings <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Bacon <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Extra Cheese <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Onion <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Mushroom <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c-></strong>
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  <p>The pizzeria for which this form is being written is always making mistakes, so it needs a way
  to contact the customer. For this purpose, we can use form controls specifically for telephone
  numbers (<code id="writing-a-form's-user-interface:the-input-element-4"><a href=input.html#the-input-element>input</a></code> elements with their <code id="writing-a-form's-user-interface:attr-input-type-3"><a href=input.html#attr-input-type>type</a></code>
  attribute set to <code id="writing-a-form's-user-interface:telephone-state-(type=tel)"><a href="input.html#telephone-state-(type=tel)">tel</a></code>) and email addresses
  (<code id="writing-a-form's-user-interface:the-input-element-5"><a href=input.html#the-input-element>input</a></code> elements with their <code id="writing-a-form's-user-interface:attr-input-type-4"><a href=input.html#attr-input-type>type</a></code> attribute set
  to <code id="writing-a-form's-user-interface:email-state-(type=email)"><a href="input.html#email-state-(type=email)">email</a></code>):</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Customer name: <c- p>&lt;</c-><c- f>input</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<strong> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Telephone: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Email address: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>email</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></strong>
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Size <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><c- p>&gt;</c-> Small <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><c- p>&gt;</c-> Medium <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><c- p>&gt;</c-> Large <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Toppings <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Bacon <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Extra Cheese <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Onion <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Mushroom <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  <p>We can use an <code id="writing-a-form's-user-interface:the-input-element-6"><a href=input.html#the-input-element>input</a></code> element with its <code id="writing-a-form's-user-interface:attr-input-type-5"><a href=input.html#attr-input-type>type</a></code>
  attribute set to <code id="writing-a-form's-user-interface:time-state-(type=time)"><a href="input.html#time-state-(type=time)">time</a></code> to ask for a delivery time. Many
  of these form controls have attributes to control exactly what values can be specified; in this
  case, three attributes of particular interest are <code id="writing-a-form's-user-interface:attr-input-min"><a href=input.html#attr-input-min>min</a></code>, <code id="writing-a-form's-user-interface:attr-input-max"><a href=input.html#attr-input-max>max</a></code>, and <code id="writing-a-form's-user-interface:attr-input-step"><a href=input.html#attr-input-step>step</a></code>. These set the
  minimum time, the maximum time, and the interval between allowed values (in seconds). This
  pizzeria only delivers between 11am and 9pm, and doesn't promise anything better than 15 minute
  increments, which we can mark up as follows:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Customer name: <c- p>&lt;</c-><c- f>input</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Telephone: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Email address: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>email</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Size <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><c- p>&gt;</c-> Small <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><c- p>&gt;</c-> Medium <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><c- p>&gt;</c-> Large <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Toppings <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Bacon <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Extra Cheese <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Onion <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Mushroom <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
<strong> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Preferred delivery time: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>time</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;11:00&quot;</c-> <c- e>max</c-><c- o>=</c-><c- s>&quot;21:00&quot;</c-> <c- e>step</c-><c- o>=</c-><c- s>&quot;900&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></strong>
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  <p>The <code id="writing-a-form's-user-interface:the-textarea-element"><a href=form-elements.html#the-textarea-element>textarea</a></code> element can be used to provide a multiline text control. In this
  instance, we are going to use it to provide a space for the customer to give delivery
  instructions:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Customer name: <c- p>&lt;</c-><c- f>input</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Telephone: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Email address: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>email</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Size <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><c- p>&gt;</c-> Small <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><c- p>&gt;</c-> Medium <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><c- p>&gt;</c-> Large <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Toppings <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Bacon <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Extra Cheese <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Onion <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Mushroom <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Preferred delivery time: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>time</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;11:00&quot;</c-> <c- e>max</c-><c- o>=</c-><c- s>&quot;21:00&quot;</c-> <c- e>step</c-><c- o>=</c-><c- s>&quot;900&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<strong> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Delivery instructions: <c- p>&lt;</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></strong>
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  <p>Finally, to make the form submittable we use the <code id="writing-a-form's-user-interface:the-button-element"><a href=form-elements.html#the-button-element>button</a></code> element:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Customer name: <c- p>&lt;</c-><c- f>input</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Telephone: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Email address: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>email</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Size <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><c- p>&gt;</c-> Small <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><c- p>&gt;</c-> Medium <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><c- p>&gt;</c-> Large <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Toppings <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Bacon <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Extra Cheese <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Onion <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Mushroom <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Preferred delivery time: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>time</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;11:00&quot;</c-> <c- e>max</c-><c- o>=</c-><c- s>&quot;21:00&quot;</c-> <c- e>step</c-><c- o>=</c-><c- s>&quot;900&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Delivery instructions: <c- p>&lt;</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<strong> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>button</c-><c- p>&gt;</c->Submit order<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></strong>
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>


  <h5 id=implementing-the-server-side-processing-for-a-form><span class=secno>4.10.1.2</span> Implementing the server-side processing for a form<a href=#implementing-the-server-side-processing-for-a-form class=self-link></a></h5>

  <p><i>This section is non-normative.</i></p>

  <p>The exact details for writing a server-side processor are out of scope for this specification.
  For the purposes of this introduction, we will assume that the script at <code>https://pizza.example.com/order.cgi</code> is configured to accept submissions using the
  <code id=implementing-the-server-side-processing-for-a-form:attr-fs-enctype-urlencoded><a href=form-control-infrastructure.html#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code> format,
  expecting the following parameters sent in an HTTP POST body:</p>

  <dl><dt><code>custname</code><dd>Customer's name<dt><code>custtel</code><dd>Customer's telephone number<dt><code>custemail</code><dd>Customer's email address<dt><code>size</code><dd>The pizza size, either <code>small</code>, <code>medium</code>, or <code>large</code><dt><code>topping</code><dd>A topping, specified once for each selected topping, with the allowed values being <code>bacon</code>, <code>cheese</code>, <code>onion</code>, and <code>mushroom</code><dt><code>delivery</code><dd>The requested delivery time<dt><code>comments</code><dd>The delivery instructions</dl>


  <h5 id=configuring-a-form-to-communicate-with-a-server><span class=secno>4.10.1.3</span> Configuring a form to communicate with a server<a href=#configuring-a-form-to-communicate-with-a-server class=self-link></a></h5>

  <p><i>This section is non-normative.</i></p>

  <p>Form submissions are exposed to servers in a variety of ways, most commonly as HTTP GET or POST
  requests. To specify the exact method used, the <code id=configuring-a-form-to-communicate-with-a-server:attr-fs-method><a href=form-control-infrastructure.html#attr-fs-method>method</a></code>
  attribute is specified on the <code id=configuring-a-form-to-communicate-with-a-server:the-form-element><a href=#the-form-element>form</a></code> element. This doesn't specify how the form data is
  encoded, though; to specify that, you use the <code id=configuring-a-form-to-communicate-with-a-server:attr-fs-enctype><a href=form-control-infrastructure.html#attr-fs-enctype>enctype</a></code>
  attribute. You also have to specify the <a id=configuring-a-form-to-communicate-with-a-server:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the service that will handle the
  submitted data, using the <code id=configuring-a-form-to-communicate-with-a-server:attr-fs-action><a href=form-control-infrastructure.html#attr-fs-action>action</a></code> attribute.</p>

  <p>For each form control you want submitted, you then have to give a name that will be used to
  refer to the data in the submission. We already specified the name for the group of radio buttons;
  the same attribute (<code id=configuring-a-form-to-communicate-with-a-server:attr-fe-name><a href=form-control-infrastructure.html#attr-fe-name>name</a></code>) also specifies the submission name.
  Radio buttons can be distinguished from each other in the submission by giving them different
  values, using the <code id=configuring-a-form-to-communicate-with-a-server:attr-input-value><a href=input.html#attr-input-value>value</a></code> attribute.</p>

  <p>Multiple controls can have the same name; for example, here we give all the checkboxes the same
  name, and the server distinguishes which checkbox was checked by seeing which values are submitted
  with that name — like the radio buttons, they are also given unique values with the <code id=configuring-a-form-to-communicate-with-a-server:attr-input-value-2><a href=input.html#attr-input-value>value</a></code> attribute.</p>

  <p>Given the settings in the previous section, this all becomes:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-><strong> <c- e>method</c-><c- o>=</c-><c- s>&quot;post&quot;</c->
      <c- e>enctype</c-><c- o>=</c-><c- s>&quot;application/x-www-form-urlencoded&quot;</c->
      <c- e>action</c-><c- o>=</c-><c- s>&quot;https://pizza.example.com/order.cgi&quot;</c-></strong><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Customer name: <c- p>&lt;</c-><c- f>input</c-><strong> <c- e>name</c-><c- o>=</c-><c- s>&quot;custname&quot;</c-></strong><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Telephone: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-><strong> <c- e>name</c-><c- o>=</c-><c- s>&quot;custtel&quot;</c-></strong><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Email address: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>email</c-><strong> <c- e>name</c-><c- o>=</c-><c- s>&quot;custemail&quot;</c-></strong><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Size <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><strong> <c- e>value</c-><c- o>=</c-><c- s>&quot;small&quot;</c-></strong><c- p>&gt;</c-> Small <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><strong> <c- e>value</c-><c- o>=</c-><c- s>&quot;medium&quot;</c-></strong><c- p>&gt;</c-> Medium <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><strong> <c- e>value</c-><c- o>=</c-><c- s>&quot;large&quot;</c-></strong><c- p>&gt;</c-> Large <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Toppings <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><strong> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;bacon&quot;</c-></strong><c- p>&gt;</c-> Bacon <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><strong> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;cheese&quot;</c-></strong><c- p>&gt;</c-> Extra Cheese <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><strong> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;onion&quot;</c-></strong><c- p>&gt;</c-> Onion <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><strong> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;mushroom&quot;</c-></strong><c- p>&gt;</c-> Mushroom <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Preferred delivery time: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>time</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;11:00&quot;</c-> <c- e>max</c-><c- o>=</c-><c- s>&quot;21:00&quot;</c-> <c- e>step</c-><c- o>=</c-><c- s>&quot;900&quot;</c-><strong> <c- e>name</c-><c- o>=</c-><c- s>&quot;delivery&quot;</c-></strong><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Delivery instructions: <c- p>&lt;</c-><c- f>textarea</c-><strong> <c- e>name</c-><c- o>=</c-><c- s>&quot;comments&quot;</c-></strong><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>button</c-><c- p>&gt;</c->Submit order<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  <p class=note>There is no particular significance to the way some of the attributes have their
  values quoted and others don't. The HTML syntax allows a variety of equally valid ways to specify
  attributes, as discussed <a href=syntax.html#syntax-attributes id=configuring-a-form-to-communicate-with-a-server:syntax-attributes>in the syntax section</a>.</p>

  <p>For example, if the customer entered "Denise Lawrence" as their name, "555-321-8642" as their
  telephone number, did not specify an email address, asked for a medium-sized pizza, selected the
  Extra Cheese and Mushroom toppings, entered a delivery time of 7pm, and left the delivery
  instructions text control blank, the user agent would submit the following to the online web
  service:</p>

  <pre><code class='html'>custname=Denise+Lawrence&amp;custtel=555-321-8642&amp;custemail=&amp;size=medium&amp;topping=cheese&amp;topping=mushroom&amp;delivery=19%3A00&amp;comments=</code></pre>


  <h5 id=client-side-form-validation><span class=secno>4.10.1.4</span> Client-side form validation<a href=#client-side-form-validation class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/Forms/Form_validation title="Client-side form validation sometimes requires JavaScript if you want to customize styling and error messages, but it always requires you to think carefully about the user. Always remember to help your users correct the data they provide. To that end, be sure to:">Form_validation</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>≤12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>≤37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>≤12.1+</span></span></div></div></div>

  <p><i>This section is non-normative.</i></p>

  <p>Forms can be annotated in such a way that the user agent will check the user's input before the
  form is submitted. The server still has to verify the input is valid (since hostile users can
  easily bypass the form validation), but it allows the user to avoid the wait incurred by having
  the server be the sole checker of the user's input.</p>

  <p>The simplest annotation is the <code id=client-side-form-validation:attr-input-required><a href=input.html#attr-input-required>required</a></code> attribute,
  which can be specified on <code id=client-side-form-validation:the-input-element><a href=input.html#the-input-element>input</a></code> elements to indicate that the form is not to be
  submitted until a value is given. By adding this attribute to the customer name, pizza size, and
  delivery time fields, we allow the user agent to notify the user when the user submits the form
  without filling in those fields:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>method</c-><c- o>=</c-><c- s>&quot;post&quot;</c->
      <c- e>enctype</c-><c- o>=</c-><c- s>&quot;application/x-www-form-urlencoded&quot;</c->
      <c- e>action</c-><c- o>=</c-><c- s>&quot;https://pizza.example.com/order.cgi&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Customer name: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;custname&quot;</c-><strong> <c- e>required</c-></strong><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Telephone: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;custtel&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Email address: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>email</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;custemail&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Size <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><strong> <c- e>required</c-></strong> <c- e>value</c-><c- o>=</c-><c- s>&quot;small&quot;</c-><c- p>&gt;</c-> Small <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><strong> <c- e>required</c-></strong> <c- e>value</c-><c- o>=</c-><c- s>&quot;medium&quot;</c-><c- p>&gt;</c-> Medium <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-><strong> <c- e>required</c-></strong> <c- e>value</c-><c- o>=</c-><c- s>&quot;large&quot;</c-><c- p>&gt;</c-> Large <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Toppings <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;bacon&quot;</c-><c- p>&gt;</c-> Bacon <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;cheese&quot;</c-><c- p>&gt;</c-> Extra Cheese <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;onion&quot;</c-><c- p>&gt;</c-> Onion <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;mushroom&quot;</c-><c- p>&gt;</c-> Mushroom <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Preferred delivery time: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>time</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;11:00&quot;</c-> <c- e>max</c-><c- o>=</c-><c- s>&quot;21:00&quot;</c-> <c- e>step</c-><c- o>=</c-><c- s>&quot;900&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;delivery&quot;</c-><strong> <c- e>required</c-></strong><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Delivery instructions: <c- p>&lt;</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;comments&quot;</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>button</c-><c- p>&gt;</c->Submit order<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  <p>It is also possible to limit the length of the input, using the <code id=client-side-form-validation:attr-fe-maxlength><a href=form-control-infrastructure.html#attr-fe-maxlength>maxlength</a></code> attribute. By adding this to the <code id=client-side-form-validation:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code>
  element, we can limit users to 1000 characters, preventing them from writing huge essays to the
  busy delivery drivers instead of staying focused and to the point:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>method</c-><c- o>=</c-><c- s>&quot;post&quot;</c->
      <c- e>enctype</c-><c- o>=</c-><c- s>&quot;application/x-www-form-urlencoded&quot;</c->
      <c- e>action</c-><c- o>=</c-><c- s>&quot;https://pizza.example.com/order.cgi&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Customer name: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;custname&quot;</c-> <c- e>required</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Telephone: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;custtel&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Email address: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>email</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;custemail&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Size <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-> <c- e>required</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;small&quot;</c-><c- p>&gt;</c-> Small <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-> <c- e>required</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;medium&quot;</c-><c- p>&gt;</c-> Medium <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-> <c- e>required</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;large&quot;</c-><c- p>&gt;</c-> Large <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Toppings <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;bacon&quot;</c-><c- p>&gt;</c-> Bacon <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;cheese&quot;</c-><c- p>&gt;</c-> Extra Cheese <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;onion&quot;</c-><c- p>&gt;</c-> Onion <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;mushroom&quot;</c-><c- p>&gt;</c-> Mushroom <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Preferred delivery time: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>time</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;11:00&quot;</c-> <c- e>max</c-><c- o>=</c-><c- s>&quot;21:00&quot;</c-> <c- e>step</c-><c- o>=</c-><c- s>&quot;900&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;delivery&quot;</c-> <c- e>required</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Delivery instructions: <c- p>&lt;</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;comments&quot;</c-><strong> <c- e>maxlength</c-><c- o>=</c-><c- s>1000</c-></strong><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>button</c-><c- p>&gt;</c->Submit order<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  <p class=note>When a form is submitted, <code id=client-side-form-validation:event-invalid><a href=indices.html#event-invalid>invalid</a></code> events are
  fired at each form control that is invalid. This can be useful for displaying a summary of the
  problems with the form, since typically the browser itself will only report one problem at a
  time.</p>



  <h5 id=enabling-client-side-automatic-filling-of-form-controls><span class=secno>4.10.1.5</span> Enabling client-side automatic filling of form controls<a href=#enabling-client-side-automatic-filling-of-form-controls class=self-link></a></h5>

  <p><i>This section is non-normative.</i></p>

  <p>Some browsers attempt to aid the user by automatically filling form controls rather than having
  the user reenter their information each time. For example, a field asking for the user's telephone
  number can be automatically filled with the user's phone number.</p>

  <p>To help the user agent with this, the <code id=enabling-client-side-automatic-filling-of-form-controls:attr-fe-autocomplete><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>
  attribute can be used to describe the field's purpose. In the case of this form, we have three
  fields that can be usefully annotated in this way: the information about who the pizza is to be
  delivered to. Adding this information looks like this:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>method</c-><c- o>=</c-><c- s>&quot;post&quot;</c->
      <c- e>enctype</c-><c- o>=</c-><c- s>&quot;application/x-www-form-urlencoded&quot;</c->
      <c- e>action</c-><c- o>=</c-><c- s>&quot;https://pizza.example.com/order.cgi&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Customer name: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;custname&quot;</c-> <c- e>required</c-> <strong><c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;shipping name&quot;</c-></strong><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Telephone: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;custtel&quot;</c-> <strong><c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;shipping tel&quot;</c-></strong><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Email address: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>email</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;custemail&quot;</c-> <strong><c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;shipping email&quot;</c-></strong><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Size <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-> <c- e>required</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;small&quot;</c-><c- p>&gt;</c-> Small <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-> <c- e>required</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;medium&quot;</c-><c- p>&gt;</c-> Medium <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-> <c- e>required</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;large&quot;</c-><c- p>&gt;</c-> Large <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Toppings <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;bacon&quot;</c-><c- p>&gt;</c-> Bacon <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;cheese&quot;</c-><c- p>&gt;</c-> Extra Cheese <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;onion&quot;</c-><c- p>&gt;</c-> Onion <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;mushroom&quot;</c-><c- p>&gt;</c-> Mushroom <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Preferred delivery time: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>time</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;11:00&quot;</c-> <c- e>max</c-><c- o>=</c-><c- s>&quot;21:00&quot;</c-> <c- e>step</c-><c- o>=</c-><c- s>&quot;900&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;delivery&quot;</c-> <c- e>required</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Delivery instructions: <c- p>&lt;</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;comments&quot;</c-> <c- e>maxlength</c-><c- o>=</c-><c- s>1000</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>button</c-><c- p>&gt;</c->Submit order<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>


  <h5 id=improving-the-user-experience-on-mobile-devices><span class=secno>4.10.1.6</span> Improving the user experience on mobile devices<a href=#improving-the-user-experience-on-mobile-devices class=self-link></a></h5>

  <p><i>This section is non-normative.</i></p>

  <p>Some devices, in particular those with virtual keyboards can provide the user with multiple
  input modalities. For example, when typing in a credit card number the user may wish to only see
  keys for digits 0-9, while when typing in their name they may wish to see a form field that by
  default capitalizes each word.</p>

  <p>Using the <code id=improving-the-user-experience-on-mobile-devices:attr-inputmode><a href=interaction.html#attr-inputmode>inputmode</a></code> attribute we can select appropriate
  input modalities:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>method</c-><c- o>=</c-><c- s>&quot;post&quot;</c->
      <c- e>enctype</c-><c- o>=</c-><c- s>&quot;application/x-www-form-urlencoded&quot;</c->
      <c- e>action</c-><c- o>=</c-><c- s>&quot;https://pizza.example.com/order.cgi&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Customer name: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;custname&quot;</c-> <c- e>required</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;shipping name&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Telephone: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;custtel&quot;</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;shipping tel&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Buzzer code: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;custbuzz&quot;</c-> <strong><c- e>inputmode</c-><c- o>=</c-><c- s>&quot;numeric&quot;</c-></strong><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Email address: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>email</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;custemail&quot;</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;shipping email&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Size <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-> <c- e>required</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;small&quot;</c-><c- p>&gt;</c-> Small <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-> <c- e>required</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;medium&quot;</c-><c- p>&gt;</c-> Medium <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>size</c-> <c- e>required</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;large&quot;</c-><c- p>&gt;</c-> Large <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> Pizza Toppings <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;bacon&quot;</c-><c- p>&gt;</c-> Bacon <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;cheese&quot;</c-><c- p>&gt;</c-> Extra Cheese <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;onion&quot;</c-><c- p>&gt;</c-> Onion <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;topping&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;mushroom&quot;</c-><c- p>&gt;</c-> Mushroom <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Preferred delivery time: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>time</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;11:00&quot;</c-> <c- e>max</c-><c- o>=</c-><c- s>&quot;21:00&quot;</c-> <c- e>step</c-><c- o>=</c-><c- s>&quot;900&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;delivery&quot;</c-> <c- e>required</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Delivery instructions: <c- p>&lt;</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;comments&quot;</c-> <c- e>maxlength</c-><c- o>=</c-><c- s>1000</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>button</c-><c- p>&gt;</c->Submit order<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>



  <h5 id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality><span class=secno>4.10.1.7</span> The difference between the field type, the autofill field name, and the input modality<a href=#the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality class=self-link></a></h5>

  <p><i>This section is non-normative.</i></p>

  <p>The <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:attr-input-type><a href=input.html#attr-input-type>type</a></code>, <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:attr-fe-autocomplete><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>, and <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:attr-inputmode><a href=interaction.html#attr-inputmode>inputmode</a></code> attributes can seem confusingly similar. For instance,
  in all three cases, the string "<code>email</code>" is a valid value. This section
  attempts to illustrate the difference between the three attributes and provides advice suggesting
  how to use them.</p>

  <p>The <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute on <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:the-input-element><a href=input.html#the-input-element>input</a></code> elements decides
  what kind of control the user agent will use to expose the field. Choosing between different
  values of this attribute is the same choice as choosing whether to use an <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:the-input-element-2><a href=input.html#the-input-element>input</a></code>
  element, a <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> element, a <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:the-select-element><a href=form-elements.html#the-select-element>select</a></code> element, etc.</p>

  <p>The <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:attr-fe-autocomplete-2><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> attribute, in contrast, describes
  what the value that the user will enter actually represents. Choosing between different values of
  this attribute is the same choice as choosing what the label for the element will be.</p>

  <p>First, consider telephone numbers. If a page is asking for a telephone number from the user,
  the right form control to use is <code id="the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:telephone-state-(type=tel)"><a href="input.html#telephone-state-(type=tel)">&lt;input type=tel></a></code>.
  However, which <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:attr-fe-autocomplete-3><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> value to use depends on
  which phone number the page is asking for, whether they expect a telephone number in the
  international format or just the local format, and so forth.</p>

  <p>For example, a page that forms part of a checkout process on an e-commerce site for a customer
  buying a gift to be shipped to a friend might need both the buyer's telephone number (in case of
  payment issues) and the friend's telephone number (in case of delivery issues). If the site
  expects international phone numbers (with the country code prefix), this could thus look like
  this:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Your phone number: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-> <c- e>name</c-><c- o>=</c-><c- s>custtel</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;billing tel&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Recipient&apos;s phone number: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-> <c- e>name</c-><c- o>=</c-><c- s>shiptel</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;shipping tel&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Please enter complete phone numbers including the country code prefix, as in &quot;+1 555 123 4567&quot;.</code></pre>

  <p>But if the site only supports British customers and recipients, it might instead look like this
  (notice the use of <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:attr-fe-autocomplete-tel-national><a href=form-control-infrastructure.html#attr-fe-autocomplete-tel-national>tel-national</a></code> rather than
  <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:attr-fe-autocomplete-tel><a href=form-control-infrastructure.html#attr-fe-autocomplete-tel>tel</a></code>):</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Your phone number: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-> <c- e>name</c-><c- o>=</c-><c- s>custtel</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;billing tel-national&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Recipient&apos;s phone number: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-> <c- e>name</c-><c- o>=</c-><c- s>shiptel</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;shipping tel-national&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Please enter complete UK phone numbers, as in &quot;(01632) 960 123&quot;.</code></pre>

  <p>Now, consider a person's preferred languages. The right <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:attr-fe-autocomplete-4><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> value is <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:attr-fe-autocomplete-language><a href=form-control-infrastructure.html#attr-fe-autocomplete-language>language</a></code>. However, there could be a number of
  different form controls used for the purpose: a text control (<code id="the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:text-(type=text)-state-and-search-state-(type=search)"><a href="input.html#text-(type=text)-state-and-search-state-(type=search)">&lt;input type=text></a></code>), a drop-down list (<code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:the-select-element-2><a href=form-elements.html#the-select-element>&lt;select></a></code>), radio buttons (<code id="the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:radio-button-state-(type=radio)"><a href="input.html#radio-button-state-(type=radio)">&lt;input
  type=radio></a></code>), etc. It only depends on what kind of interface is desired.</p>

  <p>Finally, consider names. If a page just wants one name from the user, then the relevant control
  is <code id="the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:text-(type=text)-state-and-search-state-(type=search)-2"><a href="input.html#text-(type=text)-state-and-search-state-(type=search)">&lt;input type=text></a></code>. If the page is asking for the
  user's full name, then the relevant <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:attr-fe-autocomplete-5><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> value
  is <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:attr-fe-autocomplete-name><a href=form-control-infrastructure.html#attr-fe-autocomplete-name>name</a></code>.

  <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Japanese name: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;j&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text&quot;</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;section-jp name&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->Romanized name: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;e&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text&quot;</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;section-en name&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

  <p>In this example, the "<code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:attr-fe-autocomplete-section><a href=form-control-infrastructure.html#attr-fe-autocomplete-section>section-*</a></code>" keywords in
  the <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:attr-fe-autocomplete-6><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> attributes' values tell the user agent
  that the two fields expect <em>different</em> names. Without them, the user agent could
  automatically fill the second field with the value given in the first field when the user gave a
  value to the first field.</p>

  <p class=note>The "<code>-jp</code>" and "<code>-en</code>" parts of the
  keywords are opaque to the user agent; the user agent cannot guess, from those, that the two names
  are expected to be in Japanese and English respectively.</p>

  <p>Separate from the choices regarding <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:attr-input-type-3><a href=input.html#attr-input-type>type</a></code> and <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:attr-fe-autocomplete-7><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>, the <code id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:attr-inputmode-2><a href=interaction.html#attr-inputmode>inputmode</a></code> attribute decides what kind of input modality (e.g.,
  virtual keyboard) to use, when the control is a text control.</p>

  <p>Consider credit card numbers. The appropriate input type is <em>not</em> <code id="the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:number-state-(type=number)"><a href="input.html#number-state-(type=number)">&lt;input type=number></a></code>, <a href=input.html#when-number-is-not-appropriate>as explained below</a>; it is instead <code id="the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality:text-(type=text)-state-and-search-state-(type=search)-3"><a href="input.html#text-(type=text)-state-and-search-state-(type=search)">&lt;input type=text></a></code>. To encourage the user agent to use a
  numeric input modality anyway (e.g., a virtual keyboard displaying only digits), the page would
  use</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Credit card number:
                <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;cc&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text&quot;</c-> <c- e>inputmode</c-><c- o>=</c-><c- s>&quot;numeric&quot;</c-> <c- e>pattern</c-><c- o>=</c-><c- s>&quot;[0-9]{8,19}&quot;</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;cc-number&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>



  <h5 id=input-author-notes><span class=secno>4.10.1.8</span> Date, time, and number formats<a href=#input-author-notes class=self-link></a></h5>
  

  <p><i>This section is non-normative.</i></p>

  <p>In this pizza delivery example, the times are specified in the format "HH:MM": two digits for
  the hour, in 24-hour format, and two digits for the time. (Seconds could also be specified, though
  they are not necessary in this example.)</p>

  <p>In some locales, however, times are often expressed differently when presented to users. For
  example, in the United States, it is still common to use the 12-hour clock with an am/pm
  indicator, as in "2pm". In France, it is common to separate the hours from the minutes using an
  "h" character, as in "14h00".</p>

  <p>Similar issues exist with dates, with the added complication that even the order of the
  components is not always consistent — for example, in Cyprus the first of February 2003
  would typically be written "1/2/03", while that same date in Japan would typically be written as
  "2003年02月01日" — and even with numbers, where locales differ, for
  example, in what punctuation is used as the decimal separator and the thousands separator.</p>

  <p>It is therefore important to distinguish the time, date, and number formats used in HTML and in
  form submissions, which are always the formats defined in this specification (and based on the
  well-established ISO 8601 standard for computer-readable date and time formats), from the time,
  date, and number formats presented to the user by the browser and accepted as input from the user
  by the browser.</p>

  <p>The format used "on the wire", i.e., in HTML markup and in form submissions, is intended to be
  computer-readable and consistent irrespective of the user's locale. Dates, for instance, are
  always written in the format "YYYY-MM-DD", as in "2003-02-01". While some users might see this
  format, others might see it as "01.02.2003" or "February 1, 2003".</p>

  <p>The time, date, or number given by the page in the wire format is then translated to the user's
  preferred presentation (based on user preferences or on the locale of the page itself), before
  being displayed to the user. Similarly, after the user inputs a time, date, or number using their
  preferred format, the user agent converts it back to the wire format before putting it in the DOM
  or submitting it.</p>

  <p>This allows scripts in pages and on servers to process times, dates, and numbers in a
  consistent manner without needing to support dozens of different formats, while still supporting
  the users' needs.</p>

  
  <p class=note>See also the <a href=input.html#input-impl-notes>implementation notes</a> regarding
  localization of form controls.</p>
  


  <h4 id=categories><span class=secno>4.10.2</span> Categories<a href=#categories class=self-link></a></h4>

  <p>Mostly for historical reasons, elements in this section fall into several overlapping (but
  subtly different) categories in addition to the usual ones like <a id=categories:flow-content-2 href=dom.html#flow-content-2>flow content</a>,
  <a id=categories:phrasing-content-2 href=dom.html#phrasing-content-2>phrasing content</a>, and <a id=categories:interactive-content-2 href=dom.html#interactive-content-2>interactive content</a>.</p>

  <p>A number of the elements are <dfn id=form-associated-element>form-associated
  elements</dfn>, which means they can have a <a id=categories:form-owner href=form-control-infrastructure.html#form-owner>form owner</a>.

  
  <ul class="brief category-list"><li><code id=categories:the-button-element><a href=form-elements.html#the-button-element>button</a></code><li><code id=categories:the-fieldset-element><a href=form-elements.html#the-fieldset-element>fieldset</a></code><li><code id=categories:the-input-element><a href=input.html#the-input-element>input</a></code><li><code id=categories:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code><li><code id=categories:the-output-element><a href=form-elements.html#the-output-element>output</a></code><li><code id=categories:the-select-element><a href=form-elements.html#the-select-element>select</a></code><li><code id=categories:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code><li><code id=categories:the-img-element><a href=embedded-content.html#the-img-element>img</a></code><li><a href=custom-elements.html#form-associated-custom-element id=categories:form-associated-custom-element>form-associated custom elements</a></ul>

  <p>The <a href=#form-associated-element id=categories:form-associated-element>form-associated elements</a> fall into several
  subcategories:</p>

  <dl><dt><dfn id=category-listed>Listed elements</dfn><dd>
    <p>Denotes elements that are listed in the <code id=categories:dom-form-elements><a href=#dom-form-elements><var>form</var>.elements</a></code> and <code id=categories:dom-fieldset-elements><a href=form-elements.html#dom-fieldset-elements><var>fieldset</var>.elements</a></code> APIs. These elements also
    have a <code id=categories:attr-fae-form><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> content attribute, and a matching <code id=categories:dom-fae-form><a href=form-control-infrastructure.html#dom-fae-form>form</a></code> IDL attribute, that allow authors to specify an explicit
    <a id=categories:form-owner-2 href=form-control-infrastructure.html#form-owner>form owner</a>.</p>

    
    <ul class="brief category-list"><li><code id=categories:the-button-element-2><a href=form-elements.html#the-button-element>button</a></code><li><code id=categories:the-fieldset-element-2><a href=form-elements.html#the-fieldset-element>fieldset</a></code><li><code id=categories:the-input-element-2><a href=input.html#the-input-element>input</a></code><li><code id=categories:the-object-element-2><a href=iframe-embed-object.html#the-object-element>object</a></code><li><code id=categories:the-output-element-2><a href=form-elements.html#the-output-element>output</a></code><li><code id=categories:the-select-element-2><a href=form-elements.html#the-select-element>select</a></code><li><code id=categories:the-textarea-element-2><a href=form-elements.html#the-textarea-element>textarea</a></code><li><a href=custom-elements.html#form-associated-custom-element id=categories:form-associated-custom-element-2>form-associated custom elements</a></ul>
   <dt><dfn id=category-submit>Submittable elements</dfn><dd>
    <p>Denotes elements that can be used for <a id=categories:constructing-the-form-data-set href=form-control-infrastructure.html#constructing-the-form-data-set>constructing the entry list</a> when a
    <code id=categories:the-form-element><a href=#the-form-element>form</a></code> element is <a href=form-control-infrastructure.html#concept-form-submit id=categories:concept-form-submit>submitted</a>.</p>

    
    <ul class="brief category-list"><li><code id=categories:the-button-element-3><a href=form-elements.html#the-button-element>button</a></code><li><code id=categories:the-input-element-3><a href=input.html#the-input-element>input</a></code><li><code id=categories:the-select-element-3><a href=form-elements.html#the-select-element>select</a></code><li><code id=categories:the-textarea-element-3><a href=form-elements.html#the-textarea-element>textarea</a></code><li><a href=custom-elements.html#form-associated-custom-element id=categories:form-associated-custom-element-3>form-associated custom elements</a></ul>

    <p>Some <a href=#category-submit id=categories:category-submit>submittable elements</a> can be, depending on their
    attributes, <dfn id=concept-button>buttons</dfn>. The prose below defines when an element
    is a button. Some buttons are specifically <dfn id=concept-submit-button data-lt="submit button" data-export="">submit buttons</dfn>.</p>
   <dt><dfn id=category-reset>Resettable elements</dfn><dd>
    <p>Denotes elements that can be affected when a <code id=categories:the-form-element-2><a href=#the-form-element>form</a></code> element is <a href=form-control-infrastructure.html#concept-form-reset id=categories:concept-form-reset>reset</a>.</p>

    
    <ul class="brief category-list"><li><code id=categories:the-input-element-4><a href=input.html#the-input-element>input</a></code><li><code id=categories:the-output-element-3><a href=form-elements.html#the-output-element>output</a></code><li><code id=categories:the-select-element-4><a href=form-elements.html#the-select-element>select</a></code><li><code id=categories:the-textarea-element-4><a href=form-elements.html#the-textarea-element>textarea</a></code><li><a href=custom-elements.html#form-associated-custom-element id=categories:form-associated-custom-element-4>form-associated custom elements</a></ul>
   <dt><dfn id=category-autocapitalize>Autocapitalize-and-autocorrect-inheriting
   elements</dfn><dd>
    <p>Denotes elements that inherit the <code id=categories:attr-autocapitalize><a href=interaction.html#attr-autocapitalize>autocapitalize</a></code>
    and <code id=categories:attr-autocorrect><a href=interaction.html#attr-autocorrect>autocorrect</a></code> attributes from their <a id=categories:form-owner-3 href=form-control-infrastructure.html#form-owner>form
    owner</a>.</p>

    
    <ul class="brief category-list"><li><code id=categories:the-button-element-4><a href=form-elements.html#the-button-element>button</a></code><li><code id=categories:the-fieldset-element-3><a href=form-elements.html#the-fieldset-element>fieldset</a></code><li><code id=categories:the-input-element-5><a href=input.html#the-input-element>input</a></code><li><code id=categories:the-output-element-4><a href=form-elements.html#the-output-element>output</a></code><li><code id=categories:the-select-element-5><a href=form-elements.html#the-select-element>select</a></code><li><code id=categories:the-textarea-element-5><a href=form-elements.html#the-textarea-element>textarea</a></code></ul>
   </dl>

  <p>Some elements, not all of them <a href=#form-associated-element id=categories:form-associated-element-2>form-associated</a>,
  are categorized as <dfn id=category-label>labelable elements</dfn>. These are elements that
  can be associated with a <code id=categories:the-label-element><a href=#the-label-element>label</a></code> element.

  
  <ul class="brief category-list"><li><code id=categories:the-button-element-5><a href=form-elements.html#the-button-element>button</a></code><li><code id=categories:the-input-element-6><a href=input.html#the-input-element>input</a></code> (if the <code id=categories:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href="input.html#hidden-state-(type=hidden)" id="categories:hidden-state-(type=hidden)">Hidden</a> state)<li><code id=categories:the-meter-element><a href=form-elements.html#the-meter-element>meter</a></code><li><code id=categories:the-output-element-5><a href=form-elements.html#the-output-element>output</a></code><li><code id=categories:the-progress-element><a href=form-elements.html#the-progress-element>progress</a></code><li><code id=categories:the-select-element-6><a href=form-elements.html#the-select-element>select</a></code><li><code id=categories:the-textarea-element-6><a href=form-elements.html#the-textarea-element>textarea</a></code><li><a href=custom-elements.html#form-associated-custom-element id=categories:form-associated-custom-element-5>form-associated custom elements</a></ul>


  <h4 id=the-form-element><span class=secno>4.10.3</span> The <dfn data-dfn-type=element><code>form</code></dfn> element<a href=#the-form-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form title="The <form> HTML element represents a document section containing interactive controls for submitting information.">Element/form</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement title="The HTMLFormElement interface represents a <form> element in the DOM. It allows access to—and, in some cases, modification of—aspects of the form, as well as access to its component elements.">HTMLFormElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>8+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/acceptCharset title="The HTMLFormElement.acceptCharset property represents a list of the supported character encodings for the given <form> element. This list can be comma-separated or space-separated.">HTMLFormElement/acceptCharset</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/name title="The HTMLFormElement.name property represents the name of the current <form> element as a string.">HTMLFormElement/name</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/target title="The target property of the HTMLFormElement interface represents the target of the form's action (i.e., the frame in which to render its output).">HTMLFormElement/target</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-form-element:concept-element-categories>Categories</a>:<dd><a id=the-form-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-form-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-form-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-form-element:flow-content-2-2 href=dom.html#flow-content-2>flow content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-form-element:concept-element-content-model>Content model</a>:<dd><a id=the-form-element:flow-content-2-3 href=dom.html#flow-content-2>Flow content</a>, but with no <code id=the-form-element:the-form-element><a href=#the-form-element>form</a></code> element descendants.<dt><a href=dom.html#concept-element-tag-omission id=the-form-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-form-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-form-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-form-element:attr-form-accept-charset><a href=#attr-form-accept-charset>accept-charset</a></code> —  Character encodings to use for <a id=the-form-element:form-submission-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-form-element:attr-fs-action><a href=form-control-infrastructure.html#attr-fs-action>action</a></code> —  <a id=the-form-element:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> to use for <a id=the-form-element:form-submission-2-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-form-element:attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code> —  Default setting for autofill feature for controls in the form
     <dd><code id=the-form-element:attr-fs-enctype><a href=form-control-infrastructure.html#attr-fs-enctype>enctype</a></code> —  <a id=the-form-element:entry-list href=form-control-infrastructure.html#entry-list>Entry list</a> encoding type to use for <a id=the-form-element:form-submission-2-3 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-form-element:attr-fs-method><a href=form-control-infrastructure.html#attr-fs-method>method</a></code> —  Variant to use for <a id=the-form-element:form-submission-2-4 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-form-element:attr-form-name><a href=#attr-form-name>name</a></code> —  Name of form to use in the <code id=the-form-element:dom-document-forms><a href=dom.html#dom-document-forms>document.forms</a></code> API
     <dd><code id=the-form-element:attr-fs-novalidate><a href=form-control-infrastructure.html#attr-fs-novalidate>novalidate</a></code> —  Bypass form control validation for <a id=the-form-element:form-submission-2-5 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-form-element:attr-fs-target><a href=form-control-infrastructure.html#attr-fs-target>target</a></code> —  <a id=the-form-element:navigable href=document-sequences.html#navigable>Navigable</a> for <a id=the-form-element:form-submission-2-6 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-form-element:attr-form-rel><a href=#attr-form-rel>rel</a></code><dt><a href=dom.html#concept-element-accessibility-considerations id=the-form-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-form>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-form>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-form-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->,
 <a id='the-form-element:legacyoverridebuiltins' href='https://webidl.spec.whatwg.org/#LegacyOverrideBuiltIns' data-x-internal='legacyoverridebuiltins'><c- g>LegacyOverrideBuiltIns</c-></a>,
 <a id='the-form-element:legacyunenumerablenamedproperties' href='https://webidl.spec.whatwg.org/#LegacyUnenumerableNamedProperties' data-x-internal='legacyunenumerablenamedproperties'><c- g>LegacyUnenumerableNamedProperties</c-></a>]
<c- b>interface</c-> <dfn id='htmlformelement' data-dfn-type='interface'><c- g>HTMLFormElement</c-></dfn> : <a id='the-form-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-form-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-form-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-form-element:xattr-reflect'>Reflect</a>=&quot;<a href='#attr-form-accept-charset' id='the-form-element:attr-form-accept-charset-2'>accept-charset</a>&quot;] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLFormElement' id='dom-form-acceptcharset' data-dfn-type='attribute'><c- g>acceptCharset</c-></dfn>;
  [<a id='the-form-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-form-element:xattr-reflectsetter'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <a href='form-control-infrastructure.html#dom-fs-action' id='the-form-element:dom-fs-action'><c- g>action</c-></a>;
  [<a id='the-form-element:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-form-autocomplete' id='the-form-element:dom-form-autocomplete'><c- g>autocomplete</c-></a>;
  [<a id='the-form-element:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='form-control-infrastructure.html#dom-fs-enctype' id='the-form-element:dom-fs-enctype'><c- g>enctype</c-></a>;
  [<a id='the-form-element:cereactions-5' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='form-control-infrastructure.html#dom-fs-encoding' id='the-form-element:dom-fs-encoding'><c- g>encoding</c-></a>;
  [<a id='the-form-element:cereactions-6' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='form-control-infrastructure.html#dom-fs-method' id='the-form-element:dom-fs-method'><c- g>method</c-></a>;
  [<a id='the-form-element:cereactions-7' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-form-element:xattr-reflect-2'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLFormElement' id='dom-form-name' data-dfn-type='attribute'><c- g>name</c-></dfn>;
  [<a id='the-form-element:cereactions-8' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-form-element:xattr-reflect-3'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLFormElement' id='dom-fs-novalidate' data-dfn-type='attribute'><c- g>noValidate</c-></dfn>;
  [<a id='the-form-element:cereactions-9' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-form-element:xattr-reflect-4'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLFormElement' id='dom-fs-target' data-dfn-type='attribute'><c- g>target</c-></dfn>;
  [<a id='the-form-element:cereactions-10' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-form-element:xattr-reflect-5'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLFormElement' id='dom-form-rel' data-dfn-type='attribute'><c- g>rel</c-></dfn>;
  [<c- g>SameObject</c->, <c- g>PutForwards</c->=<a href='https://dom.spec.whatwg.org/#dom-domtokenlist-value' id='the-form-element:dom-domtokenlist-value' data-x-internal='dom-domtokenlist-value'><c- n>value</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-form-element:xattr-reflect-6'>Reflect</a>=&quot;<a href='#attr-form-rel' id='the-form-element:attr-form-rel-2'>rel</a>&quot;] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-form-element:domtokenlist' href='https://dom.spec.whatwg.org/#interface-domtokenlist' data-x-internal='domtokenlist'><c- n>DOMTokenList</c-></a> <dfn data-dfn-for='HTMLFormElement' id='dom-form-rellist' data-dfn-type='attribute'><c- g>relList</c-></dfn>;

  [<c- g>SameObject</c->] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-form-element:htmlformcontrolscollection' href='common-dom-interfaces.html#htmlformcontrolscollection'><c- n>HTMLFormControlsCollection</c-></a> <a href='#dom-form-elements' id='the-form-element:dom-form-elements'><c- g>elements</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-form-length' id='the-form-element:dom-form-length'><c- g>length</c-></a>;
  <a href='#dom-form-item'><c- b>getter</c-></a> <a id='the-form-element:element' href='https://dom.spec.whatwg.org/#interface-element' data-x-internal='element'><c- n>Element</c-></a> (<c- b>unsigned</c-> <c- b>long</c-> <c- g>index</c->);
  <a href='#dom-form-nameditem'><c- b>getter</c-></a> (<a id='the-form-element:radionodelist' href='common-dom-interfaces.html#radionodelist'><c- n>RadioNodeList</c-></a> <c- b>or</c-> <a id='the-form-element:element-2' href='https://dom.spec.whatwg.org/#interface-element' data-x-internal='element'><c- n>Element</c-></a>) (<c- b>DOMString</c-> <c- g>name</c->);

  <c- b>undefined</c-> <a href='#dom-form-submit' id='the-form-element:dom-form-submit'><c- g>submit</c-></a>();
  <c- b>undefined</c-> <a href='#dom-form-requestsubmit' id='the-form-element:dom-form-requestsubmit'><c- g>requestSubmit</c-></a>(<c- b>optional</c-> <a id='the-form-element:htmlelement-2' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a>? <c- g>submitter</c-> = <c- b>null</c->);
  [<a id='the-form-element:cereactions-11' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>undefined</c-> <a href='#dom-form-reset' id='the-form-element:dom-form-reset'><c- g>reset</c-></a>();
  <c- b>boolean</c-> <a href='#dom-form-checkvalidity' id='the-form-element:dom-form-checkvalidity'><c- g>checkValidity</c-></a>();
  <c- b>boolean</c-> <a href='#dom-form-reportvalidity' id='the-form-element:dom-form-reportvalidity'><c- g>reportValidity</c-></a>();
};</code></pre>
   </dl>

  <p>The <code id=the-form-element:the-form-element-2><a href=#the-form-element>form</a></code> element <a id=the-form-element:represents href=dom.html#represents>represents</a> a <a id=the-form-element:hyperlink href=links.html#hyperlink>hyperlink</a> that can be
  manipulated through a collection of <a href=#form-associated-element id=the-form-element:form-associated-element>form-associated
  elements</a>, some of which can represent editable values that can be submitted to a server for
  processing.</p>

  <p>The <dfn data-dfn-for=form id=attr-form-accept-charset data-dfn-type=element-attr><code>accept-charset</code></dfn> attribute gives the character
  encodings that are to be used for the submission. If specified, the value must be an <a id=the-form-element:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
  case-insensitive</a> match for "<code>UTF-8</code>". <a href=references.html#refsENCODING>[ENCODING]</a></p>

  <p>The <dfn data-dfn-for=form id=attr-form-name data-dfn-type=element-attr><code>name</code></dfn> attribute
  represents the <code id=the-form-element:the-form-element-3><a href=#the-form-element>form</a></code>'s name within the <code id=the-form-element:dom-document-forms-2><a href=dom.html#dom-document-forms>forms</a></code>
  collection. The value must not be the empty string, and the value must be unique amongst the
  <code id=the-form-element:the-form-element-4><a href=#the-form-element>form</a></code> elements in the <code id=the-form-element:dom-document-forms-3><a href=dom.html#dom-document-forms>forms</a></code> collection that
  it is in, if any.</p>

  <p>The <dfn data-dfn-for=form id=attr-form-autocomplete data-dfn-type=element-attr><code>autocomplete</code></dfn> attribute is an <a id=the-form-element:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated
  attribute</a> with the following keywords and states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=form/autocomplete id=attr-form-autocomplete-on data-dfn-type=attr-value><code>on</code></dfn>
     <td><dfn id=attr-form-autocomplete-on-state>On</dfn>
     <td>Form controls will have their <a id=the-form-element:autofill-field-name href=form-control-infrastructure.html#autofill-field-name>autofill field name</a> set to "<code id=the-form-element:attr-fe-autocomplete-on><a href=form-control-infrastructure.html#attr-fe-autocomplete-on>on</a></code>" by default.
    <tr><td><dfn data-dfn-for=form/autocomplete id=attr-form-autocomplete-off data-dfn-type=attr-value><code>off</code></dfn>
     <td><dfn id=attr-form-autocomplete-off-state>Off</dfn>
     <td>Form controls will have their <a id=the-form-element:autofill-field-name-2 href=form-control-infrastructure.html#autofill-field-name>autofill field name</a> set to "<code id=the-form-element:attr-fe-autocomplete-off><a href=form-control-infrastructure.html#attr-fe-autocomplete-off>off</a></code>" by default.
  </table>

  <p>The attribute's <i id=the-form-element:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=the-form-element:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <a href=#attr-form-autocomplete-on-state id=the-form-element:attr-form-autocomplete-on-state>On</a> state.</p>

  <p>The <code id=the-form-element:attr-fs-action-2><a href=form-control-infrastructure.html#attr-fs-action>action</a></code>, <code id=the-form-element:attr-fs-enctype-2><a href=form-control-infrastructure.html#attr-fs-enctype>enctype</a></code>,
  <code id=the-form-element:attr-fs-method-2><a href=form-control-infrastructure.html#attr-fs-method>method</a></code>, <code id=the-form-element:attr-fs-novalidate-2><a href=form-control-infrastructure.html#attr-fs-novalidate>novalidate</a></code>,
  and <code id=the-form-element:attr-fs-target-2><a href=form-control-infrastructure.html#attr-fs-target>target</a></code> attributes are <a id=the-form-element:attributes-for-form-submission href=form-control-infrastructure.html#attributes-for-form-submission>attributes for form
  submission</a>.</p>

  <p>The <dfn data-dfn-for=form id=attr-form-rel data-dfn-type=element-attr><code>rel</code></dfn> attribute on
  <code id=the-form-element:the-form-element-5><a href=#the-form-element>form</a></code> elements controls what kinds of links the elements create. The attribute's value
  must be a <a id=the-form-element:unordered-set-of-unique-space-separated-tokens href=common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens>unordered set of unique space-separated tokens</a>. The <a href=links.html#linkTypes>allowed keywords and their meanings</a> are defined in an earlier section.</p>

  <p><code id=the-form-element:attr-form-rel-3><a href=#attr-form-rel>rel</a></code>'s <a href=https://dom.spec.whatwg.org/#concept-supported-tokens id=the-form-element:concept-supported-tokens data-x-internal=concept-supported-tokens>supported
  tokens</a> are the keywords defined in <a href=links.html#linkTypes>HTML link types</a> which are
  allowed on <code id=the-form-element:the-form-element-6><a href=#the-form-element>form</a></code> elements, impact the processing model, and are supported by the user
  agent. The possible <a href=https://dom.spec.whatwg.org/#concept-supported-tokens id=the-form-element:concept-supported-tokens-2 data-x-internal=concept-supported-tokens>supported tokens</a> are <code id=the-form-element:link-type-noreferrer><a href=links.html#link-type-noreferrer>noreferrer</a></code>, <code id=the-form-element:link-type-noopener><a href=links.html#link-type-noopener>noopener</a></code>, and <code id=the-form-element:link-type-opener><a href=links.html#link-type-opener>opener</a></code>. <code id=the-form-element:attr-form-rel-4><a href=#attr-form-rel>rel</a></code>'s <a href=https://dom.spec.whatwg.org/#concept-supported-tokens id=the-form-element:concept-supported-tokens-3 data-x-internal=concept-supported-tokens>supported tokens</a> must only include the tokens from this
  list that the user agent implements the processing model for.</p>

  <dl class=domintro><dt><code><var>form</var>.<a href=#dom-form-elements id=dom-form-elements-dev>elements</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements title="The HTMLFormElement property elements returns an HTMLFormControlsCollection listing all the form controls contained in the <form> element.">HTMLFormElement/elements</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>8+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>Returns an <code id=the-form-element:htmlformcontrolscollection-2><a href=common-dom-interfaces.html#htmlformcontrolscollection>HTMLFormControlsCollection</a></code> of the form controls in the form
    (excluding image buttons for historical reasons).</p>
   <dt><code><var>form</var>.<a href=#dom-form-length id=dom-form-length-dev>length</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/length title="The HTMLFormElement.length read-only property returns the number of controls in the <form> element.">HTMLFormElement/length</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the number of form controls in the form (excluding image buttons for historical
    reasons).</p>
   <dt><code><var>form</var>[<var>index</var>]</code><dd>
    <p>Returns the <var>index</var>th element in the form (excluding image buttons for historical
    reasons).</p>
   <dt><code><var>form</var>[<var>name</var>]</code><dd>
    <p>Returns the form control (or, if there are several, a <code id=the-form-element:radionodelist-2><a href=common-dom-interfaces.html#radionodelist>RadioNodeList</a></code> of the form
    controls) in the form with the given <a href=https://dom.spec.whatwg.org/#concept-id id=the-form-element:concept-id data-x-internal=concept-id>ID</a> or <code id=the-form-element:attr-fe-name><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> (excluding image buttons for historical reasons); or, if there
    are none, returns the <code id=the-form-element:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> element with the given ID.</p>

    <p>Once an element has been referenced using a particular name, that name will continue being
    available as a way to reference that element in this method, even if the element's actual <a href=https://dom.spec.whatwg.org/#concept-id id=the-form-element:concept-id-2 data-x-internal=concept-id>ID</a> or <code id=the-form-element:attr-fe-name-2><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> changes, for as long as
    the element remains in the <a id=the-form-element:tree href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a>.</p>

    <p>If there are multiple matching items, then a <code id=the-form-element:radionodelist-3><a href=common-dom-interfaces.html#radionodelist>RadioNodeList</a></code> object containing all
    those elements is returned.</p>
   <dt><code><var>form</var>.<a href=#dom-form-submit id=dom-form-submit-dev>submit</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit title="The HTMLFormElement.submit() method submits a given <form>.">HTMLFormElement/submit</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Submits the form, bypassing <a href=form-control-infrastructure.html#interactively-validate-the-constraints id=the-form-element:interactively-validate-the-constraints>interactive
    constraint validation</a> and without firing a <code id=the-form-element:event-submit><a href=indices.html#event-submit>submit</a></code>
    event.</p>
   <dt><code><var>form</var>.<a href=#dom-form-requestsubmit id=dom-form-requestsubmit-dev>requestSubmit</a>([ <var>submitter</var> ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit title="The HTMLFormElement method requestSubmit() requests that the form be submitted using a specific submit button.">HTMLFormElement/requestSubmit</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>75+</span></span><span class="safari yes"><span>Safari</span><span>16+</span></span><span class="chrome yes"><span>Chrome</span><span>76+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Requests to submit the form. Unlike <code id=the-form-element:dom-form-submit-2><a href=#dom-form-submit>submit()</a></code>, this
    method includes <a href=form-control-infrastructure.html#interactively-validate-the-constraints id=the-form-element:interactively-validate-the-constraints-2>interactive constraint
    validation</a> and firing a <code id=the-form-element:event-submit-2><a href=indices.html#event-submit>submit</a></code> event, either of which
    can cancel submission.</p>

    <p>The <var>submitter</var> argument can be used to point to a specific <a href=#concept-submit-button id=the-form-element:concept-submit-button>submit button</a>, whose <code id=the-form-element:attr-fs-formaction><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>, <code id=the-form-element:attr-fs-formenctype><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>, <code id=the-form-element:attr-fs-formmethod><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>, <code id=the-form-element:attr-fs-formnovalidate><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>, and <code id=the-form-element:attr-fs-formtarget><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code> attributes can impact submission. Additionally,
    the submitter will be included when <a id=the-form-element:constructing-the-form-data-set href=form-control-infrastructure.html#constructing-the-form-data-set>constructing the entry list</a> for submission;
    normally, buttons are excluded.</p>
   <dt><code><var>form</var>.<a href=#dom-form-reset id=dom-form-reset-dev>reset</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset title="The HTMLFormElement.reset() method restores a form element's default values. This method does the same thing as clicking the form's <input type=&quot;reset&quot;> control.">HTMLFormElement/reset</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>8+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd><p>Resets the form.<dt><code><var>form</var>.<a href=#dom-form-checkvalidity id=dom-form-checkvalidity-dev>checkValidity</a>()</code><dd><p>Returns true if the form's controls are all valid; otherwise, returns false.<dt><code><var>form</var>.<a href=#dom-form-reportvalidity id=dom-form-reportvalidity-dev>reportValidity</a>()</code><dd>
    <p>Returns true if the form's controls are all valid; otherwise, returns false and informs the
    user.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=HTMLFormElement id=dom-form-autocomplete data-dfn-type=attribute><code>autocomplete</code></dfn> IDL attribute must <a id=the-form-element:reflect href=common-dom-interfaces.html#reflect>reflect</a>
  the content attribute of the same name, <a id=the-form-element:limited-to-only-known-values href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known values</a>.</p>

  <hr>

  <p>The <dfn data-dfn-for=HTMLFormElement id=dom-form-elements data-dfn-type=attribute><code>elements</code></dfn>
  IDL attribute must return an <code id=the-form-element:htmlformcontrolscollection-3><a href=common-dom-interfaces.html#htmlformcontrolscollection>HTMLFormControlsCollection</a></code> rooted at the
  <code id=the-form-element:the-form-element-7><a href=#the-form-element>form</a></code> element's <a id=the-form-element:root href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a>, whose filter matches <a href=#category-listed id=the-form-element:category-listed>listed elements</a> whose <a id=the-form-element:form-owner href=form-control-infrastructure.html#form-owner>form owner</a> is the
  <code id=the-form-element:the-form-element-8><a href=#the-form-element>form</a></code> element, with the exception of <code id=the-form-element:the-input-element><a href=input.html#the-input-element>input</a></code> elements whose <code id=the-form-element:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#image-button-state-(type=image)" id="the-form-element:image-button-state-(type=image)">Image Button</a> state, which must, for historical reasons, be
  excluded from this particular collection.</p>

  <p>The <dfn data-dfn-for=HTMLFormElement id=dom-form-length data-dfn-type=attribute><code>length</code></dfn> IDL
  attribute must return the number of nodes <a href=https://dom.spec.whatwg.org/#represented-by-the-collection id=the-form-element:represented-by-the-collection data-x-internal=represented-by-the-collection>represented</a> by the <code id=the-form-element:dom-form-elements-2><a href=#dom-form-elements>elements</a></code>
  collection.</p>

  <p>The <a id=the-form-element:supported-property-indices href=https://webidl.spec.whatwg.org/#dfn-supported-property-indices data-x-internal=supported-property-indices>supported property indices</a> at any instant are the indices supported by the
  object returned by the <code id=the-form-element:dom-form-elements-3><a href=#dom-form-elements>elements</a></code> attribute at that
  instant.</p>

  <p id=dom-form-item>To <a id=the-form-element:determine-the-value-of-an-indexed-property href=https://webidl.spec.whatwg.org/#dfn-determine-the-value-of-an-indexed-property data-x-internal=determine-the-value-of-an-indexed-property>determine the value of an indexed property</a> for a
  <code id=the-form-element:the-form-element-9><a href=#the-form-element>form</a></code> element, the user agent must return the value returned by the <code id=the-form-element:dom-htmlcollection-item><a data-x-internal=dom-htmlcollection-item href=https://dom.spec.whatwg.org/#dom-htmlcollection-item>item</a></code> method on the <code id=the-form-element:dom-form-elements-4><a href=#dom-form-elements>elements</a></code> collection, when invoked with the given index as its
  argument.</p>

  <hr>

  <p>Each <code id=the-form-element:the-form-element-10><a href=#the-form-element>form</a></code> element has a mapping of names to elements called the <dfn id=past-names-map>past names
  map</dfn>. It is used to persist names of controls even when they change names.</p>

  <p>The <a id=the-form-element:supported-property-names href=https://webidl.spec.whatwg.org/#dfn-supported-property-names data-x-internal=supported-property-names>supported property names</a> consist of the names obtained from the following
  algorithm, in the order obtained from this algorithm:</p>

  <ol><li><p>Let <var>sourced names</var> be an initially empty ordered list of tuples
   consisting of a string, an element, a source, where the source is either <i>id</i>, <i>name</i>,
   or <i>past</i>, and, if the source is <i>past</i>, an age.<li>
    <p>For each <a href=#category-listed id=the-form-element:category-listed-2>listed element</a> <var>candidate</var>
    whose <a id=the-form-element:form-owner-2 href=form-control-infrastructure.html#form-owner>form owner</a> is the <code id=the-form-element:the-form-element-11><a href=#the-form-element>form</a></code> element, with the exception of any
    <code id=the-form-element:the-input-element-2><a href=input.html#the-input-element>input</a></code> elements whose <code id=the-form-element:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute is in the
    <a href="input.html#image-button-state-(type=image)" id="the-form-element:image-button-state-(type=image)-2">Image Button</a> state:</p>

    <ol><li><p>If <var>candidate</var> has an <code id=the-form-element:the-id-attribute><a href=dom.html#the-id-attribute>id</a></code> attribute, add
     an entry to <var>sourced names</var> with that <code id=the-form-element:the-id-attribute-2><a href=dom.html#the-id-attribute>id</a></code>
     attribute's value as the string, <var>candidate</var> as the element, and <i>id</i> as
     the source.<li><p>If <var>candidate</var> has a <code id=the-form-element:attr-fe-name-3><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute,
     add an entry to <var>sourced names</var> with that <code id=the-form-element:attr-fe-name-4><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute's value as the string, <var>candidate</var>
     as the element, and <i>name</i> as the source.</ol>
   <li>
    <p>For each <code id=the-form-element:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code> element <var>candidate</var> whose <a id=the-form-element:form-owner-3 href=form-control-infrastructure.html#form-owner>form owner</a> is the
    <code id=the-form-element:the-form-element-12><a href=#the-form-element>form</a></code> element:</p>

    <ol><li><p>If <var>candidate</var> has an <code id=the-form-element:the-id-attribute-3><a href=dom.html#the-id-attribute>id</a></code> attribute, add
     an entry to <var>sourced names</var> with that <code id=the-form-element:the-id-attribute-4><a href=dom.html#the-id-attribute>id</a></code>
     attribute's value as the string, <var>candidate</var> as the element, and <i>id</i> as
     the source.<li><p>If <var>candidate</var> has a <code id=the-form-element:attr-img-name><a href=obsolete.html#attr-img-name>name</a></code> attribute,
     add an entry to <var>sourced names</var> with that <code id=the-form-element:attr-img-name-2><a href=obsolete.html#attr-img-name>name</a></code> attribute's value as the string, <var>candidate</var>
     as the element, and <i>name</i> as the source.</ol>
   <li>
    <p>For each entry <var>past entry</var> in the <a href=#past-names-map id=the-form-element:past-names-map>past names map</a>, add an entry
    to <var>sourced names</var> with the <var>past entry</var>'s name as the
    string, <var>past entry</var>'s element as the element, <i>past</i> as the source, and
    the length of time <var>past entry</var> has been in the <a href=#past-names-map id=the-form-element:past-names-map-2>past names map</a> as
    the age.</p>
   <li><p>Sort <var>sourced names</var> by <a id=the-form-element:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a> of the element entry of
   each tuple, sorting entries with the same element by putting entries whose source is <i>id</i>
   first, then entries whose source is <i>name</i>, and finally entries whose source is <i>past</i>,
   and sorting entries with the same element and source by their age, oldest first.<li><p>Remove any entries in <var>sourced names</var> that have the empty string as
   their name.<li><p>Remove any entries in <var>sourced names</var> that have the same name as an
   earlier entry in the map.<li><p>Return the list of names from <var>sourced names</var>, maintaining their
   relative order.</ol>

  <p id=dom-form-nameditem>To <a id=the-form-element:determine-the-value-of-a-named-property href=https://webidl.spec.whatwg.org/#dfn-determine-the-value-of-a-named-property data-x-internal=determine-the-value-of-a-named-property>determine the value of a named property</a> <var>name</var>
  for a <code id=the-form-element:the-form-element-13><a href=#the-form-element>form</a></code> element, the user agent must run the following steps:</p>

  <ol><li><p>Let <var>candidates</var> be a <a id=the-form-element:live href=infrastructure.html#live>live</a> <code id=the-form-element:radionodelist-4><a href=common-dom-interfaces.html#radionodelist>RadioNodeList</a></code> object
   containing all the <a href=#category-listed id=the-form-element:category-listed-3>listed elements</a>, whose <a id=the-form-element:form-owner-4 href=form-control-infrastructure.html#form-owner>form
   owner</a> is the <code id=the-form-element:the-form-element-14><a href=#the-form-element>form</a></code> element, that have either an <code id=the-form-element:the-id-attribute-5><a href=dom.html#the-id-attribute>id</a></code> attribute or a <code id=the-form-element:attr-fe-name-5><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute equal
   to <var>name</var>, with the exception of <code id=the-form-element:the-input-element-3><a href=input.html#the-input-element>input</a></code> elements whose <code id=the-form-element:attr-input-type-3><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#image-button-state-(type=image)" id="the-form-element:image-button-state-(type=image)-3">Image Button</a> state, in <a id=the-form-element:tree-order-2 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>.<li><p>If <var>candidates</var> is empty, let <var>candidates</var> be a <a id=the-form-element:live-2 href=infrastructure.html#live>live</a>
   <code id=the-form-element:radionodelist-5><a href=common-dom-interfaces.html#radionodelist>RadioNodeList</a></code> object containing all the <code id=the-form-element:the-img-element-3><a href=embedded-content.html#the-img-element>img</a></code> elements, whose <a id=the-form-element:form-owner-5 href=form-control-infrastructure.html#form-owner>form
   owner</a> is the <code id=the-form-element:the-form-element-15><a href=#the-form-element>form</a></code> element, that have either an <code id=the-form-element:the-id-attribute-6><a href=dom.html#the-id-attribute>id</a></code> attribute or a <code id=the-form-element:attr-img-name-3><a href=obsolete.html#attr-img-name>name</a></code> attribute
   equal to <var>name</var>, in <a id=the-form-element:tree-order-3 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>.<li><p>If <var>candidates</var> is empty, <var>name</var> is the name of one of
   the entries in the <code id=the-form-element:the-form-element-16><a href=#the-form-element>form</a></code> element's <a href=#past-names-map id=the-form-element:past-names-map-3>past names map</a>: return the object
   associated with <var>name</var> in that map.<li><p>If <var>candidates</var> contains more than one node, return <var>candidates</var>.<li><p>Otherwise, <var>candidates</var> contains exactly one node. Add a mapping from
   <var>name</var> to the node in <var>candidates</var> in the <code id=the-form-element:the-form-element-17><a href=#the-form-element>form</a></code>
   element's <a href=#past-names-map id=the-form-element:past-names-map-4>past names map</a>, replacing the previous entry with the same name, if
   any.<li><p>Return the node in <var>candidates</var>.</ol>

  <p>If an element listed in a <code id=the-form-element:the-form-element-18><a href=#the-form-element>form</a></code> element's <a href=#past-names-map id=the-form-element:past-names-map-5>past names map</a> changes
  <a id=the-form-element:form-owner-6 href=form-control-infrastructure.html#form-owner>form owner</a>, then its entries must be removed from that map.</p>

  

  <hr>

  <p>The <dfn data-dfn-for=HTMLFormElement id=dom-form-submit data-dfn-type=method><code>submit()</code></dfn>
  method steps are to <a href=form-control-infrastructure.html#concept-form-submit id=the-form-element:concept-form-submit>submit</a> <a id=the-form-element:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> from
  <a id=the-form-element:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, with <i id=the-form-element:submit-subbmitted-from-method><a href=form-control-infrastructure.html#submit-subbmitted-from-method>submitted from <code>submit()</code> method</a></i> set to true.</p>

  <p>The <dfn data-dfn-for=HTMLFormElement id=dom-form-requestsubmit data-dfn-type=method><code>requestSubmit(<var>submitter</var>)</code></dfn> method, when
  invoked, must run the following steps:</p>

  <ol><li>
    <p>If <var>submitter</var> is not null, then:</p>

    <ol><li><p>If <var>submitter</var> is not a <a href=#concept-submit-button id=the-form-element:concept-submit-button-2>submit
     button</a>, then throw a <code id=the-form-element:typeerror><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code>.<li><p>If <var>submitter</var>'s <a id=the-form-element:form-owner-7 href=form-control-infrastructure.html#form-owner>form owner</a> is not this <code id=the-form-element:the-form-element-19><a href=#the-form-element>form</a></code> element,
     then throw a <a id=the-form-element:notfounderror href=https://webidl.spec.whatwg.org/#notfounderror data-x-internal=notfounderror>"<code>NotFoundError</code>"</a> <code id=the-form-element:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</ol>
   <li><p>Otherwise, set <var>submitter</var> to this <code id=the-form-element:the-form-element-20><a href=#the-form-element>form</a></code> element.<li><p><a href=form-control-infrastructure.html#concept-form-submit id=the-form-element:concept-form-submit-2>Submit</a> this <code id=the-form-element:the-form-element-21><a href=#the-form-element>form</a></code> element, from
   <var>submitter</var>.</ol>

  <p>The <dfn data-dfn-for=HTMLFormElement id=dom-form-reset data-dfn-type=method><code>reset()</code></dfn>
  method, when invoked, must run the following steps:</p>

  <ol><li><p>If the <code id=the-form-element:the-form-element-22><a href=#the-form-element>form</a></code> element is marked as <i id=the-form-element:locked-for-reset><a href=#locked-for-reset>locked for reset</a></i>, then return.<li><p>Mark the <code id=the-form-element:the-form-element-23><a href=#the-form-element>form</a></code> element as <dfn id=locked-for-reset>locked for reset</dfn>.<li><p><a href=form-control-infrastructure.html#concept-form-reset id=the-form-element:concept-form-reset>Reset</a> the <code id=the-form-element:the-form-element-24><a href=#the-form-element>form</a></code> element.<li><p>Unmark the <code id=the-form-element:the-form-element-25><a href=#the-form-element>form</a></code> element as <i id=the-form-element:locked-for-reset-2><a href=#locked-for-reset>locked for reset</a></i>.</ol>

  <p>If the <dfn data-dfn-for=HTMLFormElement id=dom-form-checkvalidity data-dfn-type=method><code>checkValidity()</code></dfn> method is invoked, the user agent
  must <a id=the-form-element:statically-validate-the-constraints href=form-control-infrastructure.html#statically-validate-the-constraints>statically validate the constraints</a> of the <code id=the-form-element:the-form-element-26><a href=#the-form-element>form</a></code> element, and return
  true if the constraint validation returned a <i>positive</i> result, and false if it returned a
  <i>negative</i> result.</p>

  <p>If the <dfn data-dfn-for=HTMLFormElement id=dom-form-reportvalidity data-dfn-type=method><code>reportValidity()</code></dfn> method is invoked, the user agent
  must <a id=the-form-element:interactively-validate-the-constraints-3 href=form-control-infrastructure.html#interactively-validate-the-constraints>interactively validate the constraints</a> of the <code id=the-form-element:the-form-element-27><a href=#the-form-element>form</a></code> element, and
  return true if the constraint validation returned a <i>positive</i> result, and false if it returned
  a <i>negative</i> result.</p>

  

  <div class=example>

   <p>This example shows two search forms:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;https://www.google.com/search&quot;</c-> <c- e>method</c-><c- o>=</c-><c- s>&quot;get&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->Google: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;search&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;q&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;submit&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Search...&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;https://www.bing.com/search&quot;</c-> <c- e>method</c-><c- o>=</c-><c- s>&quot;get&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->Bing: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;search&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;q&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;submit&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Search...&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h4 id=the-label-element><span class=secno>4.10.4</span> The <dfn data-dfn-type=element><code>label</code></dfn> element<a href=#the-label-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label title="The <label> HTML element represents a caption for an item in a user interface.">Element/label</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement title="The HTMLLabelElement interface gives access to properties specific to <label> elements. It inherits methods and properties from the base HTMLElement interface.">HTMLLabelElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor title="The HTMLLabelElement.htmlFor property reflects the value of the for content property. That means that this script-accessible property is used to set and read the value of the content property for, which is the ID of the label's associated control element.">HTMLLabelElement/htmlFor</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-label-element:concept-element-categories>Categories</a>:<dd><a id=the-label-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-label-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-label-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd><a id=the-label-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-label-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-label-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-label-element:concept-element-content-model>Content model</a>:<dd><a id=the-label-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>, but with no descendant <a href=#category-label id=the-label-element:category-label>labelable elements</a> unless it is the element's <a href=#labeled-control id=the-label-element:labeled-control>labeled control</a>, and no descendant <code id=the-label-element:the-label-element><a href=#the-label-element>label</a></code> elements.<dt><a href=dom.html#concept-element-tag-omission id=the-label-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-label-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-label-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-label-element:attr-label-for><a href=#attr-label-for>for</a></code> —  Associate the label with form control
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-label-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-label>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-label>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-label-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmllabelelement' data-dfn-type='interface'><c- g>HTMLLabelElement</c-></dfn> : <a id='the-label-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-label-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  <c- b>readonly</c-> <c- b>attribute</c-> <a href='#htmlformelement' id='the-label-element:htmlformelement'><c- n>HTMLFormElement</c-></a>? <a href='#dom-label-form' id='the-label-element:dom-label-form'><c- g>form</c-></a>;
  [<a id='the-label-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-label-element:xattr-reflect'>Reflect</a>=&quot;<a href='#attr-label-for' id='the-label-element:attr-label-for-2'>for</a>&quot;] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLLabelElement' id='dom-label-htmlfor' data-dfn-type='attribute'><c- g>htmlFor</c-></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-label-element:htmlelement-2' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a>? <a href='#dom-label-control' id='the-label-element:dom-label-control'><c- g>control</c-></a>;
};</code></pre>
   </dl>

  <p>The <code id=the-label-element:the-label-element-2><a href=#the-label-element>label</a></code> element <a id=the-label-element:represents href=dom.html#represents>represents</a> a caption in a user interface. The
  caption can be associated with a specific form control, known as the
  <code id=the-label-element:the-label-element-3><a href=#the-label-element>label</a></code> element's <dfn id=labeled-control>labeled control</dfn>, either using the <code id=the-label-element:attr-label-for-3><a href=#attr-label-for>for</a></code> attribute, or by putting the form control inside the
  <code id=the-label-element:the-label-element-4><a href=#the-label-element>label</a></code> element itself.</p>

  

  <p>Except where otherwise specified by the following rules, a <code id=the-label-element:the-label-element-5><a href=#the-label-element>label</a></code> element has no
  <a href=#labeled-control id=the-label-element:labeled-control-2>labeled control</a>.</p>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for title="The for attribute is an allowed attribute for <label> and <output>. When used on a <label> element it indicates the form element that this label describes. When used on an <output> element it allows for an explicit relationship between the elements that represent values which are used in the output.">Attributes/for</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=label id=attr-label-for data-dfn-type=element-attr><code>for</code></dfn> attribute may
  be specified to indicate a form control with which the caption is to be associated. If the
  attribute is specified, the attribute's value must be the <a href=https://dom.spec.whatwg.org/#concept-id id=the-label-element:concept-id data-x-internal=concept-id>ID</a> of a
  <a href=#category-label id=the-label-element:category-label-2>labelable element</a> in the same <a id=the-label-element:tree href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a> as the
  <code id=the-label-element:the-label-element-6><a href=#the-label-element>label</a></code> element. If the attribute is specified and there is an element in
  the <a id=the-label-element:tree-2 href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a> whose <a href=https://dom.spec.whatwg.org/#concept-id id=the-label-element:concept-id-2 data-x-internal=concept-id>ID</a> is equal to the value of the <code id=the-label-element:attr-label-for-4><a href=#attr-label-for>for</a></code> attribute, and the first such element in <a id=the-label-element:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree
  order</a> is a <a href=#category-label id=the-label-element:category-label-3>labelable element</a>, then that element is the
  <code id=the-label-element:the-label-element-7><a href=#the-label-element>label</a></code> element's <a href=#labeled-control id=the-label-element:labeled-control-3>labeled control</a>.</p>

  

  <p>If the <code id=the-label-element:attr-label-for-5><a href=#attr-label-for>for</a></code> attribute is not specified, but the
  <code id=the-label-element:the-label-element-8><a href=#the-label-element>label</a></code> element has a <a href=#category-label id=the-label-element:category-label-4>labelable element</a> descendant,
  then the first such descendant in <a id=the-label-element:tree-order-2 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a> is the <code id=the-label-element:the-label-element-9><a href=#the-label-element>label</a></code> element's
  <a href=#labeled-control id=the-label-element:labeled-control-4>labeled control</a>.</p>

  <p>The <code id=the-label-element:the-label-element-10><a href=#the-label-element>label</a></code> element's exact default presentation and behavior, in particular what
  its <a id=the-label-element:activation-behaviour href=https://dom.spec.whatwg.org/#eventtarget-activation-behavior data-x-internal=activation-behaviour>activation behavior</a> might be, if anything, should match the platform's label
  behavior. The <a id=the-label-element:activation-behaviour-2 href=https://dom.spec.whatwg.org/#eventtarget-activation-behavior data-x-internal=activation-behaviour>activation behavior</a> of a <code id=the-label-element:the-label-element-11><a href=#the-label-element>label</a></code> element for events targeted
  at <a id=the-label-element:interactive-content-2-2 href=dom.html#interactive-content-2>interactive content</a> descendants of a <code id=the-label-element:the-label-element-12><a href=#the-label-element>label</a></code> element, and any
  descendants of those <a id=the-label-element:interactive-content-2-3 href=dom.html#interactive-content-2>interactive content</a> descendants, must be to do nothing.</p>

  <p class=note><a href=custom-elements.html#form-associated-custom-element id=the-label-element:form-associated-custom-element>Form-associated custom
  elements</a> are <a href=#category-label id=the-label-element:category-label-5>labelable elements</a>, so for user agents
  where the <code id=the-label-element:the-label-element-13><a href=#the-label-element>label</a></code> element's <a id=the-label-element:activation-behaviour-3 href=https://dom.spec.whatwg.org/#eventtarget-activation-behavior data-x-internal=activation-behaviour>activation behavior</a> impacts the <a href=#labeled-control id=the-label-element:labeled-control-5>labeled
  control</a>, both built-in and custom elements will be impacted.</p>

  

  <div class=example>

   <p>For example, on platforms where clicking a label activates the form control, clicking the
   <code id=the-label-element:the-label-element-14><a href=#the-label-element>label</a></code> in the following snippet could trigger the user agent to <a id=the-label-element:fire-a-click-event href=webappapis.html#fire-a-click-event>fire a <code>click</code> event</a> at the <code id=the-label-element:the-input-element><a href=input.html#the-input-element>input</a></code> element, as if the
   element itself had been triggered by the user:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>lost</c-><c- p>&gt;</c-> Lost<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

   <p>Similarly, assuming <code>my-checkbox</code> was declared as a
   <a id=the-label-element:form-associated-custom-element-2 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a> (like in <a href=custom-elements.html#custom-elements-face-example>this
   example</a>), then the code</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>my-checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>lost</c-><c- p>&gt;&lt;/</c-><c- f>my-checkbox</c-><c- p>&gt;</c-> Lost<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

   <p>would have the same behavior, <a href=webappapis.html#fire-a-click-event id=the-label-element:fire-a-click-event-2>firing a <code>click</code> event</a> at the <code>my-checkbox</code>
   element.</p>

   <p>On other platforms, the behavior in both cases might be just to focus the control, or to do
   nothing.</p>
  </div>

  

  <div class=example>

   <p>The following example shows three form controls each with a label, two of which have small
   text showing the right format for users to use.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Full name: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>fn</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>small</c-><c- p>&gt;</c->Format: First Last<c- p>&lt;/</c-><c- f>small</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Age: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>age</c-> <c- e>type</c-><c- o>=</c-><c- s>number</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Post code: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>pc</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>small</c-><c- p>&gt;</c->Format: AB12 3CD<c- p>&lt;/</c-><c- f>small</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <dl class=domintro><dt><code><var>label</var>.<a href=#dom-label-control id=dom-label-control-dev>control</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/control title="The read-only HTMLLabelElement.control property returns a reference to the control (in the form of an object of type HTMLElement or one of its derivatives) with which the <label> element is associated, or null if the label isn't associated with a control.">HTMLLabelElement/control</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Returns the form control that is associated with this element.<dt><code><var>label</var>.<a href=#dom-label-form id=dom-label-form-dev>form</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/form title="The read-only HTMLLabelElement.form property returns an HTMLFormElement object which represents the form of which the label's associated control is a part, or null if there is either no associated control, or if that control isn't in a form.">HTMLLabelElement/form</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the <a id=the-label-element:form-owner href=form-control-infrastructure.html#form-owner>form owner</a> of the form control that is associated with this
    element.</p>

    <p>Returns null if there isn't one.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=HTMLLabelElement id=dom-label-control data-dfn-type=attribute><code>control</code></dfn>
  IDL attribute must return the <code id=the-label-element:the-label-element-15><a href=#the-label-element>label</a></code> element's <a href=#labeled-control id=the-label-element:labeled-control-6>labeled control</a>, if any,
  or null if there isn't one.</p>

  <p>The <dfn data-dfn-for=HTMLLabelElement id=dom-label-form data-dfn-type=attribute><code>form</code></dfn> IDL
  attribute must run the following steps:</p>

  <ol><li><p>If the <code id=the-label-element:the-label-element-16><a href=#the-label-element>label</a></code> element has no <a href=#labeled-control id=the-label-element:labeled-control-7>labeled control</a>, then return
   null.<li><p>If the <code id=the-label-element:the-label-element-17><a href=#the-label-element>label</a></code> element's <a href=#labeled-control id=the-label-element:labeled-control-8>labeled control</a> is not a
   <a href=#form-associated-element id=the-label-element:form-associated-element>form-associated element</a>, then return null.<li><p>Return the <code id=the-label-element:the-label-element-18><a href=#the-label-element>label</a></code> element's <a href=#labeled-control id=the-label-element:labeled-control-9>labeled control</a>'s <a id=the-label-element:form-owner-2 href=form-control-infrastructure.html#form-owner>form
   owner</a> (which can still be null).</ol>

  

  <p class=note>The <code id=the-label-element:dom-label-form-2><a href=#dom-label-form>form</a></code> IDL attribute on the
  <code id=the-label-element:the-label-element-19><a href=#the-label-element>label</a></code> element is different from the <code id=the-label-element:attr-fae-form><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> IDL
  attribute on <a href=#category-listed id=the-label-element:category-listed>listed</a> <a href=#form-associated-element id=the-label-element:form-associated-element-2>form-associated elements</a>, and the <code id=the-label-element:the-label-element-20><a href=#the-label-element>label</a></code> element does not have a <code id=the-label-element:attr-fae-form-2><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> content attribute.</p>

  <hr>

  <dl class=domintro><dt><code><var>control</var>.<a href=#dom-lfe-labels id=dom-lfe-labels-dev>labels</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/labels title="The HTMLButtonElement.labels read-only property returns a NodeList of the <label> elements associated with the <button> element.">HTMLButtonElement/labels</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>56+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/labels title="The HTMLInputElement.labels read-only property returns a NodeList of the <label> elements associated with the <input> element, if the element is not hidden. If the element has the type hidden, the property returns null.">HTMLInputElement/labels</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>56+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMeterElement/labels title="The HTMLMeterElement.labels read-only property returns a NodeList of the <label> elements associated with the <meter> element.">HTMLMeterElement/labels</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>56+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLOutputElement/labels title="The HTMLOutputElement.labels read-only property returns a NodeList of the <label> elements associated with the <output> element.">HTMLOutputElement/labels</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>56+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>9+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLProgressElement/labels title="The HTMLProgressElement.labels read-only property returns a NodeList of the <label> elements associated with the <progress> element.">HTMLProgressElement/labels</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>56+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/labels title="The HTMLSelectElement.labels read-only property returns a NodeList of the <label> elements associated with the <select> element.">HTMLSelectElement/labels</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>56+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/labels title="The HTMLTextAreaElement.labels read-only property returns a NodeList of the <label> elements associated with the <textarea> element.">HTMLTextAreaElement/labels</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>56+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns a <code id=the-label-element:nodelist><a data-x-internal=nodelist href=https://dom.spec.whatwg.org/#interface-nodelist>NodeList</a></code> of all the <code id=the-label-element:the-label-element-21><a href=#the-label-element>label</a></code> elements that the form control
    is associated with.</p>
   </dl>

  

  <p><a href=#category-label id=the-label-element:category-label-6>Labelable elements</a> and all <code id=the-label-element:the-input-element-2><a href=input.html#the-input-element>input</a></code> elements
  have a <a id=the-label-element:live href=infrastructure.html#live>live</a> <code id=the-label-element:nodelist-2><a data-x-internal=nodelist href=https://dom.spec.whatwg.org/#interface-nodelist>NodeList</a></code> object associated with them that represents the
  list of <code id=the-label-element:the-label-element-22><a href=#the-label-element>label</a></code> elements, in <a id=the-label-element:tree-order-3 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>, whose <a href=#labeled-control id=the-label-element:labeled-control-10>labeled
  control</a> is the element in question. The <dfn data-dfn-for=HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLOutputElement,HTMLProgressElement,HTMLMeterElement id=dom-lfe-labels data-dfn-type=attribute><code>labels</code></dfn> IDL attribute of <a href=#category-label id=the-label-element:category-label-7>labelable elements</a> that are not <a href=custom-elements.html#form-associated-custom-element id=the-label-element:form-associated-custom-element-3>form-associated custom elements</a>, and the <code id=the-label-element:dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> IDL attribute of <code id=the-label-element:the-input-element-3><a href=input.html#the-input-element>input</a></code> elements, on getting,
  must return that <code id=the-label-element:nodelist-3><a data-x-internal=nodelist href=https://dom.spec.whatwg.org/#interface-nodelist>NodeList</a></code> object, and that same value must always be returned, unless
  this element is an <code id=the-label-element:the-input-element-4><a href=input.html#the-input-element>input</a></code> element whose <code id=the-label-element:attr-input-type><a href=input.html#attr-input-type>type</a></code>
  attribute is in the <a href="input.html#hidden-state-(type=hidden)" id="the-label-element:hidden-state-(type=hidden)">Hidden</a> state, in which case it
  must instead return null.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/labels title="The labels read-only property of the ElementInternals interface returns the labels associated with the element.">ElementInternals/labels</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>98+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome yes"><span>Chrome</span><span>77+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p><a href=custom-elements.html#form-associated-custom-element id=the-label-element:form-associated-custom-element-4>Form-associated custom elements</a> don't have
  a <code id=the-label-element:dom-lfe-labels-2><a href=#dom-lfe-labels>labels</a></code> IDL attribute. Instead, their
  <code id=the-label-element:elementinternals><a href=custom-elements.html#elementinternals>ElementInternals</a></code> object has a <dfn data-dfn-for=ElementInternals id=dom-elementinternals-labels data-dfn-type=attribute><code>labels</code></dfn> IDL attribute. On getting, it must throw
  a <a id=the-label-element:notsupportederror href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a> <code id=the-label-element:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the <a href=custom-elements.html#internals-target id=the-label-element:internals-target>target element</a> is not a <a id=the-label-element:form-associated-custom-element-5 href=custom-elements.html#form-associated-custom-element>form-associated custom
  element</a>. Otherwise, it must return that <code id=the-label-element:nodelist-4><a data-x-internal=nodelist href=https://dom.spec.whatwg.org/#interface-nodelist>NodeList</a></code> object, and that same value
  must always be returned.</p>

  <div class=example>
   <p>This (non-conforming) example shows what happens to the <code id=the-label-element:nodelist-5><a data-x-internal=nodelist href=https://dom.spec.whatwg.org/#interface-nodelist>NodeList</a></code> and what <code id=the-label-element:dom-lfe-labels-3><a href=#dom-lfe-labels>labels</a></code> returns when an <code id=the-label-element:the-input-element-5><a href=input.html#the-input-element>input</a></code> element has its <code id=the-label-element:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute changed.</p>

   <pre><code class='html'><c- cp>&lt;!doctype html&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>const</c-> input <c- o>=</c-> document<c- p>.</c->querySelector<c- p>(</c-><c- t>&apos;input&apos;</c-><c- p>);</c->
 <c- a>const</c-> labels <c- o>=</c-> input<c- p>.</c->labels<c- p>;</c->
 console<c- p>.</c->assert<c- p>(</c->labels<c- p>.</c->length <c- o>===</c-> <c- mf>1</c-><c- p>);</c->

 input<c- p>.</c->type <c- o>=</c-> <c- t>&apos;hidden&apos;</c-><c- p>;</c->
 console<c- p>.</c->assert<c- p>(</c->labels<c- p>.</c->length <c- o>===</c-> <c- mf>0</c-><c- p>);</c-> <c- c1>// the input is no longer the label&apos;s </c-><a href='#labeled-control' id='the-label-element:labeled-control-11'><c- c1>labeled control</c-></a>
 console<c- p>.</c->assert<c- p>(</c->input<c- p>.</c->labels <c- o>===</c-> <c- kc>null</c-><c- p>);</c->

 input<c- p>.</c->type <c- o>=</c-> <c- t>&apos;checkbox&apos;</c-><c- p>;</c->
 console<c- p>.</c->assert<c- p>(</c->labels<c- p>.</c->length <c- o>===</c-> <c- mf>1</c-><c- p>);</c-> <c- c1>// the input is once again the label&apos;s </c-><a href='#labeled-control' id='the-label-element:labeled-control-12'><c- c1>labeled control</c-></a>
 console<c- p>.</c->assert<c- p>(</c->input<c- p>.</c->labels <c- o>===</c-> labels<c- p>);</c-> <c- c1>// same value as returned originally</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>
  </div>

  


  <nav><a href=tables.html>← 4.9 Tabular data</a> — <a href=index.html>Table of Contents</a> — <a href=input.html>4.10.5 The input element →</a></nav>
